<template>
  <div id="app">
    <!-- 左测导航 -->
    <div class="sidebar-container" :style="{width: widthData}" v-if="loginHide">
        <div class="logo">
          <img src="./images/logo.png" alt="">
        </div>
        <el-col :span="12">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="rgb(53, 59, 78)"
            text-color="rgb(173, 175, 181)"
            active-text-color="#409eff">
            <el-menu-item index="1">
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <span>内容管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1"><p @click="publishArticles">发布文章</p></el-menu-item>
                <el-menu-item index="1-2"><p @click="cententList">内容列表</p></el-menu-item>
                <el-menu-item index="1-2">评论列表</el-menu-item>
                <el-menu-item index="1-2">素材管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <span>粉丝管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">图文数据</el-menu-item>
                <el-menu-item index="1-2">粉丝概况</el-menu-item>
                <el-menu-item index="1-2">粉丝图像</el-menu-item>
                <el-menu-item index="1-2">粉丝列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
             <el-menu-item index="4">
              <span slot="title">账户信息</span>
            </el-menu-item>
          </el-menu>
      </el-col>
    </div>
    <!-- 右侧展示 -->
    <div class="main-container" :style="{'margin-left': widthData}">
       <div class="navbar clearfix" v-if="loginHide">
          <div class="nav-left">
              <i class="el-icon-s-unfold" @click="switchNav"></i>
              <span>江苏传智播客教育科技股份有限公司</span>
          </div>
          <div class="nav-right clearfix">
            <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="inputSearch">
            </el-input>
            <span class="el-tooltip">消息</span>
            <div class="selfdefine">
              <img :src="userInfo.photo" alt="" class="user-avatar">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  {{userInfo.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item >个人信息</el-dropdown-item>
                  <el-dropdown-item >git地址</el-dropdown-item>
                  <el-dropdown-item ><span @click="tuichu" class="tuichu">退出</span></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
       </div>
       <div class="app-main">
          <keep-alive>
            <router-view>
            </router-view>
          </keep-alive>
       </div>
    </div>
    
  </div>
</template>

<script>
import {mapGetters,mapState,mapMutations,mapActions} from "vuex";
  export default {
    data() {
      return {
        isCollapse: true,
        inputSearch:'',
        widthData:'0',
      };
    },
    methods: {
      //开关侧边栏
      switchNav(){
        if(this.widthData == '200px'){
          this.widthData = '50px'
        }else{
          this.widthData = '200px'
        }
      },
      //退出
      tuichu(){
          this.$store.state.loginHide = false;
          this.$store.commit('updateLoginHide', this.loginHide);
          this.$router.push('/login')
      },
      //发布文章
      publishArticles(){
        this.$router.push('/articles')
      },
      //内容列表
      cententList(){
        this.$router.push('/list')
      }
    },
     computed: {
        ...mapState(['loginHide','userInfo'])
    },
    created(){
      if(window.document.location.pathname == '/login'|| window.document.location.pathname == '/'){
        this.$store.state.loginHide = false;
        this.widthData = 0;
      }else{
        this.$store.state.loginHide = true;
        this.widthData = '200px';
      }
      
     
    },
    watch: {
        'loginHide':{
            handler: function (newVal,oldVal){
                if(newVal == false){
                  this.widthData = 0;
                }else{
                  this.widthData = '200px';
                }
                    
               
            }
        },
    },
  }
  
document.body.addEventListener('click',function(e){
    var a_idx = 0;
    var a = ['❤'];//可设置多个效果
    var colors = ['red','blue','black','orange'];
    var colorIndex = Math.floor(Math.random()*4);//0-3的随机数
    var $i = $("<span />").text(a[a_idx]);
    a_idx = (a_idx + 1) % a.length;
    var x = e.pageX,
        y = e.pageY;
    $i.css({
        "z-index": 999 ,
        "top": y - 20,
        "left": x,
        "position": "absolute",
        "font-weight": "bold",
        "color": colors[colorIndex],
    });
    $("body").append($i);
    $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
  

},false)

</script>

<style lang="less">

#app {
  .app-main{
    min-height: calc(100vh - 50px);
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f2f3f5;
}
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  .sidebar-container{
    transition: width .5s;
    width: 200px;
    height: 100%;
    position: fixed;
    font-size: 0;
    background-color: #323745;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    .logo{
      background-color: #2e2f32;
      padding: 15px;
      img{
        width: 120px;
      }
    }
    .el-menu{
      color: rgb(173, 175, 181);
      background-color: rgb(53, 59, 78) !important;
      border-right:0;
      .el-menu--inline{
          li:hover{
          background-color: #3296fa !important;
          color: #fff!important;
        }
      }
      li:hover{
        color: rgb(173, 175, 181) !important;
          background-color: rgb(42, 47, 62) !important;
      }
      li{
        .el-submenu__title:hover{
          color: rgb(173, 175, 181) !important;
          background-color: rgb(42, 47, 62) !important;
        }
        .el-menu-item-group__title{
          padding: 0;
        }
      }
    }
  }
  .main-container{
    min-height: 100%;
    transition: margin-left .28s;
    margin-left: 200px;
    position: relative;
    .navbar{
      height: 50px;
      line-height: 50px;
      .nav-left{
        float: left;
        margin-left: 10px;
        i{
          font-size: 18px;
          margin-right: 10px;
          cursor: pointer
        }
      }
      .nav-right{
        float: right;
        .el-input{
          width: 180px;
          margin-right: 20px;
          float: left;
          input{
            height: 32px;
            line-height: 32px;
          }

        }
        .el-tooltip{
          float: left;
        }
        .selfdefine{
          float: left;
          margin-left: 10px;
          img{
            width: 35px;
            height: 35px;
            border-radius: 50%;
            vertical-align: middle;
          }
          .el-dropdown{
            margin: 0 10px;
            cursor: pointer;
            .tuichu{
              width: 100%;
              display: inline-block;
            }
          }
        }
      }
    }
  }
  .app-main{
    min-height: calc(100vh - 50px);
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f2f3f5;
}
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
.clearfix:before,.clearfix:after {
  content: " ";
  display: table;
  clear:both
}
</style>
